<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
    </head>
    <body>
        <h1>箭头函数</h1>
        <p>来源:<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions</a></p>
        <h2>不绑定this</h2>
        <p>由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：</p>
        <script>
            // function Person() {
            //   // Person() 构造函数定义 `this`作为它自己的实例.
            //   this.age = 0;

            //   setInterval(function growUp() {
            //     // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
            //     // 与在 Person()构造函数中定义的 `this`并不相同.
            //     this.age++;
            //     console.log(this.age); // NaN
            //   }, 1000);
            // }

            // var p = new Person();
            // 箭头函数不会创建自己的this,它使用封闭执行上下文的this值。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同
            // function Person(){
            //   this.age = 0;

            //   setInterval(() => {
            //     this.age++; // |this| 正确地指向person 对象
            //     console.log(this.age); 
            //   }, 1000);
            // }

            // var p = new Person();

            // function Person() {
            //   var that = this;
            //   that.age = 0;

            //   setInterval(function growUp() {
            //     //  回调引用的是`that`变量, 其值是预期的对象. 
            //     that.age++;
            //   }, 1000);
            // }
            // function Person() {
            //   var that = this;
            //   that.age = 0;

            //   setInterval(function growUp() {
            //     //  回调引用的是`that`变量, 其值是预期的对象. 
            //     this.age++;
            //     console.log(this.age); 
            //   }.bind(this), 1000);
            // }
            // var p = new Person();
            // 案例五：箭头函数
            // function Person(){
            //   this.age = 0;

            //   setInterval(() => {
            //     this.age++; // |this| 正确地指向person 对象
            //     console.log(this.age); 
            //   }, 1000);
            // }

            // var p = new Person();
            // 案例六：严格模式+箭头函数
            // function PersonX() {
            //   'use strict'
            //   this.age = 0;
            //   var closure = "123"
            //   setInterval(()=>{
            //     this.age++;
            //     console.log(this.age)
            //   }, 1000);
            // }

            // var px = new PersonX();
            // 案例七：严格模式
            function Person() {
                'use strict'
              this.age = 0;
              var closure = "123"
              setInterval(function growUp() {
                this.age++;
                console.log(this.age); // NaN
              }, 1000);
            }

            var p = new Person();
        </script>
    </body>
</html>